<template>
	<view style="height: 100%;">
		<view class="view_box">
			<view class="view_box_view">
				<text class="my_apply_shop" @click="goApplyShop">我要开店</text>
				<view>
					<text style="font-size: 24px;font-weight: bold;">您好,</text>
				</view>
				<view class="">
					<text style="font-size: 24px;font-weight: bold;">欢迎来到吃了吗商家端</text>
				</view>
				<u-form style="margin-top: 20px;" :model="accountLoginForm" ref="accountLoginForm">
					<u-form-item label="姓名" prop="userName">
						<u-input v-model="accountLoginForm.userName" />
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u-input type="password" v-model="accountLoginForm.password" />
					</u-form-item>
				</u-form>
				<view style="margin-top: 20px;text-align: right;">
					<text>无法登录</text>
				</view>
				<view>
					<button class="login_btn" style="background-color: #0BAFF5;color: white;" @click="loginByUserRequest()" type="primary">登录</button>
					<button class="login_btn" type="default" @click="goLoginByUser">手机号登录</button>
				</view>
			</view>
		</view>
		<u-popup customStyle="" :show="popupShow" mode="center"  @close="close" @open="open">
			<view>
				<u-button @click="goApplyShop" type="primary" :plain="true" :hairline="true" text="点我去申请店铺"></u-button>
			</view>
		</u-popup>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	import {nav} from '../../utils/router.js'
	export default {
		components: {},
		data() {
			return {
				// 方式
				manner: '',
				// popup 弹出框状态
				popupShow: false,
				// 账号表单
				accountLoginForm: {
					// 账号
					userName: '',
					// 密码
					password: '',
				},
				// 账号登录form校验
				accountRules: {
					userName: [
						{ 
							required: true, 
							message: '请输入账号', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['blur'],
						}
					],
					password: [
						{ 
							required: true, 
							message: '请输入密码', 
							trigger: ['blur'],
						}
					],
				},
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.accountLoginForm.setRules(this.accountRules);
		},
		onLoad: function (option) {
			this.manner = option.manner
			
		},
		mounted () {
			
		},
		methods: {
			// 去到手机号登录页面
			goLoginByUser(){
				if (this.manner === "apply_shop") {
					uni.redirectTo({
						url: '/pages/login/loginByPhone?manner=' + this.manner
					})
				} else {
					uni.redirectTo({
						url: '/pages/login/loginByPhone'
					})
				}
			},
			// 打开 popup弹出框
			open() {
				// console.log('open');
			},
			// 关闭 popup弹出框
			close() {
				this.show = false
				// console.log('close');
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
			// 根据账号登录
			loginByUserRequest() {
				this.$myRequest({
					url: '/eat-service/shoplogin/loginByUserRequest',
					method: 'GET',
					data: {
						userName: this.accountLoginForm.userName,
						password: this.accountLoginForm.password
					},
				}).then(res => {
					if (res.data.flag) {
						if (res.data.obj.user.role != 2) {
							this.uNotify('你还不是商家，请申请开通店铺后登录', 'warning')
							this.popupShow = true
						} else {
							this.uNotify('登录成功', 'success')
							// token
							uni.setStorageSync('token',res.data.obj.token)
							// 登录账号
							uni.setStorageSync('userName',res.data.obj.user.userName)
							// 用户昵称
							uni.setStorageSync('nickName',res.data.obj.user.nickName)
							// 用户性别
							uni.setStorageSync('sex',res.data.obj.user.sex)
							// 用户年龄
							uni.setStorageSync('age',res.data.obj.user.age)
							// 用户电话
							uni.setStorageSync('phone',res.data.obj.user.phone)
							// 用户邮箱
							uni.setStorageSync('mail',res.data.obj.user.mail)
							// 用户生日
							uni.setStorageSync('birthday',res.data.obj.user.birthday)
							// 用户头像id
							uni.setStorageSync('avatarId',res.data.obj.user.avatarId)
							// 用户角色
							uni.setStorageSync('role',res.data.obj.user.role)
							// 用户id
							uni.setStorageSync('id',res.data.obj.user.id)
							if (this.manner === 'apply_shop') {
								this.goApplyShop()
							} else {
								uni.redirectTo({
									url: '/pages/shop/shop-select',
								})
								// nav(uni.getStorageSync('token'))
							}
						}
					} else {
						this.uNotify('账号或密码不正确', 'warning')
					}
				})
			},
			// 账号密码登录
			loginByUser(){
				this.formShow = false
			},
			
			// 手机号登录
			loginByPhone(){
				this.formShow = true
			},
			// 去到申请开店页面
			goApplyShop () {
				uni.navigateTo({
					url: '/pages/shop/shop-apply'
				})
			},
			// 触发提交表单
			login() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style scoped>
.view_box{
	width: 100%;
	height: 400px;
	overflow: hidden;
	display: flex;
	align-items: center;//垂直居中
}
.view_box_view{
	width: 90%;
	margin: 0 auto;
}
.my_apply_shop{
	float: right;
	overflow: ;
}
.my_apply_shop:active{
	color: #ff1b1b;
}
.login_btn{
	margin-top:20px;
}
/* popup弹出框 style样式 */
.u-popup-slot {
	width: 200px;
	height: 150px;
	@include flex;
	justify-content: center;
	align-items: center;
}
</style>
